﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="css/loaders.min.css" />
		<link rel="stylesheet" type="text/css" href="css/loading.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/base1.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.css" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/mui.min.js"></script>
		<script type="text/javascript">
			$(window).load(function() {
				$(".loading").addClass("loader-chanage")
				$(".loading").fadeOut(300)
			})

			function quanxuan() {
				var all = document.getElementById("allcheckbox");
				var box = document.getElementsByName("checkbox1");
				for(i = 0; i < box.length; i++) {
					box[i].checked = all.checked;
				}
				for(i = 0; i < box.length; i++) {
					box[i].onclick = function() {
						if(!this.checked) {
							all.checked = false;
						}
					};
				}
			}
			
			function add() {
				var zong = 0;
				var jia = document.getElementById("shopcar_button_01");
				var shu = document.getElementById("shopcar_input_02").value;
				zong = shu * 500;
				document.getElementById("shopcar_span_01").innerHTML = zong;
				document.getElementById("shopcar_span_02").innerHTML = zong;
			}

			function jian() {
				var zong = 0;
				var jia = document.getElementById("shopcar_button_00");
				var shu = document.getElementById("shopcar_input_02").value;	
				zong = shu * 500;
				document.getElementById("shopcar_span_01").innerHTML = zong;
				document.getElementById("shopcar_span_02").innerHTML = zong;
			}

			function shanchu() {
				var shan = document.getElementById("shopcar_span_03");
				var ul = document.getElementById("shopcar_ul_01");
				ul.remove(true);
				document.getElementById("shopcar_span_02").innerHTML = 0;
			}
		</script>

		<style type="text/css">
			.shopcar_p_01 { 
				color: #000000;
				font-size: 13px;
				margin-left: 57%;
				margin-top: 15px;
			}
			
			.shopcar_li_00{
				height: 140px;
				padding-top: 0px;
				border-bottom: #D8D8D8 solid 1px;
				padding-bottom: 0px;
			}
			
			.shopcar_div_00 {
				margin-left: 10%;
			}
			
			.shopcar_ul_01 {
				margin-top: 1%;
				background-color: #FFF;
				border-bottom: 1px solid #BDBDBD;
				border-top: 1px solid #BDBDBD;
				padding-top: 0px;
			}
			
			.shopcar_p_03 {
				color: red;
				font-size: 18px;
				margin-top: 20px;
				margin-left: 57%;
			}
			
			.shopcar_div_06{
				margin-top: -15%;
				margin-right: 20px;
				float: right;
			}
			
			.mui-table-view-cell:after {
				height: 0px!important;
			}
			
			.shopcar_button_02 {
				width: 32.3%;
				font-size: 20px;
				margin-right: 0px;
				background-color: red;
				border-radius: 0;
				border: 0px;
			}
			
			.shopcar_input_01 {
				margin-top: 49px;
				margin-left: -15px;
			}
			
			.shopcar_li_01 {
				padding-top: 0px;
				padding-bottom: 0px;
				margin-top: 0px;
				vertical-align: middle;
			}
			
			.shopcar_span_01 {
				font-size: 15px;
			}
			
			.shopcar_div_01 {
				background-color: #ECECEC;
			}
			
			.shopcar_div_02 {
				float: left;
				padding: 10px;
				height: 38px;
				margin-left: -20px;
			}
			
			.shopcar_div_05 {
				float: left;
				height: 38px;
			}
			
			.shopcar_div_03 {
				float: left;
				height: 38px;
				width: 122px;
				padding: 10px;
				color: red;
				margin-top: -3px;
				font-size: 25px;
			}
			
			.shopcar_div_04 {
				display: inline;
				margin-left: 0%;
			}
			
			.shopcar_span_02 {
				font-size: 28px;
				padding-top: 10px;
				display: inline-block;
				margin-left: 15%;
				margin-right: 36.5%;
			}
			
			.shopcar_li_02 {
				padding: 0px;
				height: 38px;
				height: 38px;
				width: auto;
			}
			
			.shopcar_input_02 {
				margin-left: -15px;
				margin-top: -3px;
			}

			.shopcar_img_01{  
				height: 150px;width: 
				170px;padding-top: 0px;	
				padding-bottom: 0px;
			}	
		</style>
	</head>
	<!--loading页开始-->
	<div class="loading">
		<div class="loader">
			<div class="loader-inner pacman">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</div>
	<!--loading页结束-->

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">购物车</h1>
		</header>

		<div class="mui-content">
			<ul class="mui-table shopcar_ul_01" id="shopcar_ul_01">
				<li class="mui-table-view-cell mui-media mui-input-row mui-checkbox mui-left shopcar_li_00">
					<input name="checkbox1" value="Item 1" type="checkbox" class="shopcar_input_01">
					<a href="#" style="margin-left: -25%;">
						<img class="mui-media-object mui-pull-left shopcar_img_01" src="images/timg.jpg">
						<div class="mui-media-body shopcar_div_00">
							<p class="mui-ellipsis shopcar_p_01">计算机课程</p>
							<p class="mui-ellipsis shopcar_p_03">¥<span id="shopcar_span_01">500</span>元</p>
						</div>
					</a>
				</li>
				
				<div class="mui-numbox shopcar_div_06" data-numbox-step='1' data-numbox-min='0' data-numbox-max='1000' id="main">
					<button class="mui-btn mui-numbox-btn-minus" type="button" onclick="jian()" id="shopcar_button_00">-</button>
					<input class="mui-numbox-input" type="number" value="1" id="shopcar_input_02" />
					<button class="mui-btn mui-numbox-btn-plus" type="button" onclick="add()" id="shopcar_button_01">+</button>
				</div>

				<li class="shopcar_li_01">
					<span class="iconfont icon-changyonggoupiaorenshanchu shopcar_span_02" onclick="shanchu()" id="shopcar_span_03"></span>
					<span id="">
					<button type="button" class="mui-btn mui-btn-danger shopcar_button_02">立即支付</button>
					</span>
				</li>
			</ul>
		</div>

		<footer class="page-footer fixed-footer">
			<div id="" class="shopcar_div_01">
				<div class="shopcar_div_05">
					<li class="mui-table-view-cell mui-media mui-input-row mui-checkbox mui-left shopcar_li_02">
						<input name="allcheckbox" value="Item" id="allcheckbox" type="checkbox" class="shopcar_input_02" onclick="quanxuan()">
					</li>
				</div>
				<div class="shopcar_div_02">
					<span id="" class="shopcar_span_01">
						合计 :
					</span>
				</div>
				<div class="shopcar_div_03">
					<span id="shopcar_span_02">
						500
					</span>
					<span id="">
						元
					</span>
				</div>
				<div class="shopcar_div_04">
					<span id="">
					<button type="button" class="mui-btn mui-btn-danger shopcar_button_02">立即支付</button>
					</span>
				</div>
			</div>
			<ul  style="font-size: 10%;">
			<li>
				<a href="index.html">
					<img src="images/footer01.png"/>
					<p><font size="1"> 首页</font></p>
				</a>
			</li>
			<li>
				<a href="index-bak.html">
					<img src="images/footer02.png"/>
					<p ><font size="1"> 附近 </font>	</p>
				</a>
			</li>
			<li>
				<a href="shopcar.html">
					<img src="images/footer003.png"/>
					<p><font size="1"> 购物车 </font> </p>
				</a>
			</li>
			<li class="active">
				<a href="self.html">
					<img src="images/footer04.png"/>
					<p><font size="1">  个人中心</font> </p>
				</a>
			</li>
		</ul>

		</footer>
	</body>

</html>